<template>
  <div class="credit-behavior">
      <tab-component title="信用行为" tabPosition="right">
        <tab-panel-component label="良好行为" name="good" >
          <el-table :data="tableBehavior.list" style="width: 100%" class="detail-table behavior">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="creNo" label="信用编号" width="110"></el-table-column>
            <el-table-column prop="creStartTime" label="生效截止日期" width="240"></el-table-column>
            <el-table-column prop="creBeh" label="信用行为" width="300"></el-table-column>
            <el-table-column prop="creScore" label="记录分值" width="150">
              <template slot-scope="scope">
                <div class="orange" style="padding-left: 20px">+{{scope.row.creScore}}</div>
              </template>
            </el-table-column>
            <el-table-column class="text-right" prop="chuFa" label="处罚来源（处罚文号 时间）"></el-table-column>
          </el-table>
          <div class="padding-top-20">
            <el-pagination class="white-page"
                           background
                           hide-on-single-page
                           :current-page.sync="tableBehavior.query.pg"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size.sync="tableBehavior.query.pgsz"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableBehavior.total"
                           @current-change="getBehavior"
                           @size-change="getBehavior">
            </el-pagination>
          </div>
        </tab-panel-component>
        <tab-panel-component label="不良行为" name="bad" >
          <el-table :data="tableBehavior.list" style="width: 100%" class="detail-table behavior">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="creNo" label="信用编号" width="110"></el-table-column>
            <el-table-column prop="creStartTime" label="生效截止日期" width="240"></el-table-column>
            <el-table-column prop="creBeh" label="信用行为" width="300"></el-table-column>
            <el-table-column prop="creScore" label="记录分值" width="150">
              <template slot-scope="scope">
                <div class="orange" style="padding-left: 20px">+{{scope.row.creScore}}</div>
              </template>
            </el-table-column>
            <el-table-column class="text-right" prop="chuFa" label="处罚来源（处罚文号 时间）"></el-table-column>
          </el-table>
          <div class="padding-top-20">
            <el-pagination class="white-page"
                           background
                           hide-on-single-page
                           :current-page.sync="tableBehavior.query.pg"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size.sync="tableBehavior.query.pgsz"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableBehavior.total"
                           @current-change="getBehavior"
                           @size-change="getBehavior">
            </el-pagination>
          </div>
        </tab-panel-component>
        <tab-panel-component label="行政处罚" name="penalty" >
          <el-table :data="tableBehavior.list" style="width: 100%" class="detail-table behavior">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="creNo" label="信用编号" width="110"></el-table-column>
            <el-table-column prop="creStartTime" label="生效截止日期" width="240"></el-table-column>
            <el-table-column prop="creBeh" label="信用行为" width="300"></el-table-column>
            <el-table-column prop="creScore" label="记录分值" width="150">
              <template slot-scope="scope">
                <div class="orange" style="padding-left: 20px">+{{scope.row.creScore}}</div>
              </template>
            </el-table-column>
            <el-table-column class="text-right" prop="chuFa" label="处罚来源（处罚文号 时间）"></el-table-column>
          </el-table>
          <div class="padding-top-20">
            <el-pagination class="white-page"
                           background
                           hide-on-single-page
                           :current-page.sync="tableBehavior.query.pg"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size.sync="tableBehavior.query.pgsz"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableBehavior.total"
                           @current-change="getBehavior"
                           @size-change="getBehavior">
            </el-pagination>
          </div>
        </tab-panel-component>
      </tab-component>
  </div>
</template>

<script>
  import { getBehavior } from '@/api/dataService/index';

  export default {
    name: "creditBehavior",
    props: {},
    data() {
     return{
       tableBehavior: {//信用行为
         tabs: [
           {name:'良好行为',value:'310100',total:15},
           {name:'不良行为',value:'310200',total:9},
           {name:'行政处罚',value:'310300',total:13}
         ],
         fun:'getBehavior',
         list: [],
         total: 0,
         query: {
           pg: 1,
           pgsz: 5,
           value: '310100'
         }
       }
     }
    },
    mounted() {
      this.getBehavior();
    },
    methods: {
      tab(obj, index) {
        obj.query.value = obj.tabs[index].value;
        this[obj.fun]();
      },
      //获取人员信用行为
      getBehavior(data) {
        let {pg, pgsz, value} = this.tableBehavior.query;
         let params = {pg:pg, pgsz, value};
        getBehavior(params).then(res => {
          this.tableBehavior.list = res.rows;
          this.tableBehavior.total = res.total;
        })
      }
    }
  }
</script>
